<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC2aHGtS75OgEGKCeAMnEM4T8jMWHk5osA&sensor=false">
    </script>
    
    <script type="text/javascript">

	var getMarkerUniqueId=function(lat,lng){
		return lat+'_'+lng;
	}
    var getLatLng=function(lat,lng){
    	return new google.maps.LatLng(lat,lng);
    }
    var markers=[];
    
    function initialize() {
		var lat=0;
		var lng=0;
		//get user's most recently location from andorid device
		if(window.android){
			lat=window.android.getLatitude();
			lng=window.android.getLongitude();
		}
		//setting mapOption
        var mapOptions = {
          //center: new google.maps.LatLng(-34.397, 150.644),
          center: new google.maps.LatLng(lat, lng),          
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //create a map
         map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        //
        google.maps.event.addListener(map, 'click', function(e) {
        	
        	 var lat = e.latLng.lat(); // lat of clicked point
        	    var lng = e.latLng.lng(); // lng of clicked point
        	    var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
        	    var marker = new google.maps.Marker({
        	        position: getLatLng(lat, lng),
        	        map: map,
        	        id: 'marker_' + markerId
        	    });
        	    markers[markerId] = marker; // cache marker in markers object
        	    
        	     bindMarkerEvents(marker);
          });
          
        var bindMarkerEvents = function(marker) {
            google.maps.event.addListener(marker, "click", function (e) {
                var markerId = getMarkerUniqueId(e.latLng.lat(), e.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
                removeMarker(marker, markerId); // remove it
            });
        };
  		

        
      }

      //delete a marker
      function removeMarker(marker,markerId){    	  
    	  marker.setMap(null);
    	  delete markers[markerId];
    	  if(markers.length==1){
    		  markers=new Array();
    	  }
    	  if(window.android){
    		  android.showToast(markerId);
    	  }
      }

  google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">

</div>

</body>
</html>